<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
		<title>模块化相关规范</title>
		<style type="text/css">
			* {
				margin: 0;
				height: 0;
			}

			html,
			body {
				height: 100%;
				width: 100%;
			}

			body {
				font-size: 1rem;
				font-family: 幼圆;
			}

			#app {
				width: 40rem;
				height: auto;
				border: 0.1rem solid black;
				box-shadow: 0.5rem 1rem 1rem 0.5rem gray;
				margin: 2.5rem auto;
				padding:2rem;
			}

			h2 {
				height: auto;
				margin: 0.5rem 0;
				margin-top: 0;
				color: #f60;
				font-size: 0.9rem;
			}

			p {
				height: auto;
				font-size:0.8rem;
			}

			hr {
				margin: 0.8rem 0;
			}
			span{
				color:black;
				font-weight:normal;
				font-size:0.8rem;
			}
			strong{
				color:#f60;
				font-weight:bold;
			}
		</style>
		<style>
			@media (min-width:1000px) {
				html {
					font-size: 20px;
				}
			}

			@media (min-width:500px) and (max-width:1000px) {
				html {
					font-size: 16px;
				}
			}

			@media (max-width:500px) {
				html {
					font-size: 12px;
				}
				#app{
					width:auto;
					height:auto;
					margin:0;
				}
				h2{
					font-size:1.5rem;
				}
				p{
					font-size:1.2rem;
				}
				span{
					font-size:1.2rem;
				}
				strong{
					font-size:1.5rem;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">

			<h2>模块化概述</h2>
			<p>传统开发模式的主要问题:1,命名冲突;2,文件依赖;---通过模块化解决上述问题</p>
			<hr>


			<h2>模块化: <span>就是把单独的一个功能封装在一个模块中(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员,也可以依赖别的模块</span></h2>
			<hr>
			<p><strong>模块化优势:</strong>方便代码的重用,从而提升开发效率.并且方便后期的维护</p>
			<hr>


			<h2>浏览器端模块化规范---AMD---CMD</h2>
			<hr>
			<p>1,AMD---Require.js(http://www.erquirejs.cn/)</p><hr>
			<p>2,CMD---Sea.js(https://seajs.github.io/seajs)</p>
			<hr>


			<h2>服务器端模块化规范---CommonJS</h2>
			<hr>
			<p>1,模块分为单文件模块和包</p><hr>
			<p>2,模块成员导出:module.exports和exports</p><hr>
			<p>3,模块成员导入:requrire("模块标识符")</p>
             <hr>

			<h2>大一统的模块化规范---ES6模块化</h2>
			<p>ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端和服务器端通用的模块化开发方式</p><hr>
			<h2>ES6模块化规范中定义:</h2><hr>
			<p>1,每个JS文件都是一个独立的模块</p><hr>
			<p>2,导入模块成员使用import关键字</p><hr>
			<p>3,暴露模块成员使用export关键字</p><hr>
		</div>
	</body>
</html>
